<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../css/mui.css">
    <link rel="stylesheet" href="./css/demo-common.css">
    <link rel="stylesheet" href="./css/atom-one-light.css">
    <script src="./js/jquery-2.2.3.min.js"></script>
    <script src="./js/highlight.pack.js"></script>
    <script src="../js/message.js"></script>
  </head>
  <body>
    <h3>Message消息框</h3>
    <h4>显示消息</h4>
    <section>
        <div class="example">
            <a href="javascript:void 0" id="msg1">普通消息</a>&nbsp;&nbsp;
            <a href="javascript:void 0" id="msg2">成功消息</a>&nbsp;&nbsp;
            <a href="javascript:void 0" id="msg3">通知消息</a>&nbsp;&nbsp;
            <a href="javascript:void 0" id="msg4">警告消息</a>&nbsp;&nbsp;
            <a href="javascript:void 0" id="msg5">错误消息</a>&nbsp;&nbsp;
        </div>
        <pre><code>
    // 普通消息
    Message.msg('这是一个消息框');

    // 成功消息
    Message.success('成功消息');

    // 通知消息
    Message.info('通知消息');

    // 警告消息
    Message.warning('警告消息');

    // 错误消息
    Message.error('错误消息');
        </code></pre>
    </section>

    <h4>自定义显示时间</h4>
    <section>
        <div class="example">
            <a href="javascript:void 0" id="msg6">显示10秒消息</a>
        </div>
        <pre><code>
    // 10秒后消失
    Message.msg('10秒后消失', 10000);
        </code></pre>
    </section>

    <h4>全局载入消息</h4>
    <section>
        <div class="example">
            <a href="javascript:void 0" id="load">显示载入消息</a>&nbsp;&nbsp;
            <a href="javascript:void 0" id="unload">隐藏载入消息</a>
        </div>
        <pre><code>
    // 显示Loading
    Message.loading('数据加载中');

    // 隐藏Loading
    Message.unLoading();
        </code></pre>
    </section>

    <script>
    $(document).ready(function() {
        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    });
    $('#msg1').on('click', function(e) {
        Message.msg('这是一个消息框');
    });
    $('#msg2').on('click', function(e) {
        Message.success('成功消息');
    });
    $('#msg3').on('click', function(e) {
        Message.info('通知消息');
    });
    $('#msg4').on('click', function(e) {
        Message.warning('警告消息');
    });
    $('#msg5').on('click', function(e) {
        Message.error('错误消息');
    });
    $('#msg6').on('click', function(e) {
        Message.msg('10秒后消失', 10000);
    });
    $('#load').on('click', function(e) {
        Message.loading('数据加载中');
    });
    $('#unload').on('click', function(e) {
        Message.unLoading();
    });
    </script>
  </body>
</html>